﻿@page "/switchs"

<Block Title="Switch 开关" Introduction="提供最普通的开关应用" CodeFile="switch.1.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnValueChanged="@OnValueChanged" Value="true" OnColor="Color.Secondary" OnText="开启" OffText="关闭">Secondary</Switch></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnValueChanged="@OnValueChanged" Value="true" OnColor="Color.Success" OnText="开启" OffText="关闭">Success</Switch></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnValueChanged="@OnValueChanged" Value="true" OnColor="Color.Danger" OnText="开启" OffText="关闭">Danger</Switch></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnValueChanged="@OnValueChanged" Value="true" OnColor="Color.Warning" OnText="开启" OffText="关闭">Warning</Switch></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnValueChanged="@OnValueChanged" Value="true" OnColor="Color.Info" OnText="开启" OffText="关闭">Info</Switch></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnValueChanged="@OnValueChanged" Value="true" OnColor="Color.Dark" OnText="开启" OffText="关闭">Dark</Switch></div>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="开关大小" Introduction="提供开关大小应用" CodeFile="switch.2.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnColor="Color.Primary" Size="Size.ExtraLarge" OnText="开启" OffText="关闭">primary</Switch></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnColor="Color.Secondary" Size="Size.ExtraSmall" OnText="开启" OffText="关闭">Secondary</Switch></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnColor="Color.Success" Size="Size.Large" OnText="开启" OffText="关闭">Success</Switch></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnColor="Color.Danger" Size="Size.Medium" OnText="开启" OffText="关闭">Danger</Switch></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnColor="Color.Warning" Size="Size.None" OnText="开启" OffText="关闭">Warning</Switch></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnColor="Color.Info" Size="Size.Small" OnText="开启" OffText="关闭">Info</Switch></div>
        </div>
    </div>
</Block>

<Block Title="禁用状态" Introduction='通过 <code>IsDisabled="true"</code> 设置开关不可用状态。' CodeFile="switch.3.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnColor="Color.Primary" IsDisabled="true" OnText="开启" OffText="关闭">primary</Switch></div>
        </div>
    </div>
</Block>

<Block Title="开关颜色" Introduction='通过 <code>OnColor="Color.Danger" OffColor="Color.Success"</code> 设置On开颜色，Off关颜色 开关颜色设置' CodeFile="switch.4.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnColor="Color.Danger" OffColor="Color.Success" OnText="开启" OffText="关闭">开关颜色</Switch></div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />